<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>

</head>
<body>
<div id="chat">
    <table>
        <tr>
            <td>请输入聊天内容</td>
            <td><input type="text" id="xxxx"></td>
            <td><input type="button" id="inputMessage" value="发送"></td>
        </tr>
    </table>
    <div id="messages">群聊进行中...</div>
</div>
</body>
<script type="text/javascript">
    //webSocket实现聊天，客户端需要做的事情，总结起来，其实就是一下几件
    //1，获取连接，new WebSocket()
    //服务端地址和请求类型
    var wsUrl="ws://127.0.0.1:8014/charRoomServer";
    //客户端与服务端建立连接，建立连接以后，它会发出一个ws.open事件
    var ws=new WebSocket(wsUrl);


    //连接成功后，提示浏览器客户端输入名称
    ws.onopen=function(){
        var userName=prompt("请给自己取一个名字");
        ws.send(userName);
    }
    //客户端收到服务端发送的消息
    ws.onmessage=function(message){
        var messages=document.getElementById("messages");
        //获取以后，在客户端显示,messages是聊天内容的框的id
        messages.innerHTML+=message.data;
    }

    //获取某个用户输入的聊天内容，并发送到服务端，让服务端广播给所有人
    function getMessage(){
        var inputMessage=document.getElementById("inputMessage").value;
        //alert(inputMessage);
        //获取消息以后，要发送给服务端，然后广播给所有用户
        if(typeof(inputMessage)=='undefined'){
            alert("请输入您要发送的消息！");
        }else{
            ws.send(inputMessage);
            //输入框消息清空
            inputMessage.value="";
        }

    }
    //当关闭页面或者用户退出时，会执行一个ws.close()方法
    window.onbeforeunload=function(){
        ws.close();
    }
    //按回车发送信息
    document.onkeyup=function(e){
        if(e.keyCode==13){
            getMessage();
            inputMessage.value="";
        }
    }

</script>
</html>
